import { animalMap } from './markSixAnimal'
import roune_red from '@/assets/img/bet/round_red.png'
import roune_blue from '@/assets/img/bet/round_blue.png'
import roune_green from '@/assets/img/bet/round_green.png'

// 红波
export const redNumList = [
  '01',
  '02',
  '07',
  '08',
  '12',
  '13',
  '18',
  '19',
  '23',
  '24',
  '29',
  '30',
  '34',
  '35',
  '40',
  '45',
  '46',
]
// 蓝波
export const blueNumList = [
  '03',
  '04',
  '09',
  '10',
  '14',
  '15',
  '20',
  '25',
  '26',
  '31',
  '36',
  '37',
  '41',
  '42',
  '47',
  '48',
]
// 绿波
export const greenNumList = [
  '05',
  '06',
  '11',
  '16',
  '17',
  '21',
  '22',
  '27',
  '28',
  '32',
  '33',
  '38',
  '39',
  '43',
  '44',
  '49',
]

//六合彩所有号码
export const numberList = [
  '01',
  '02',
  '03',
  '04',
  '05',
  '06',
  '07',
  '08',
  '09',
  '10',
  '11',
  '12',
  '13',
  '14',
  '15',
  '16',
  '17',
  '18',
  '19',
  '20',
  '21',
  '22',
  '23',
  '24',
  '25',
  '26',
  '27',
  '28',
  '29',
  '30',
  '31',
  '32',
  '33',
  '34',
  '35',
  '36',
  '37',
  '38',
  '39',
  '40',
  '41',
  '42',
  '43',
  '44',
  '45',
  '46',
  '47',
  '48',
  '49',
]

const styleStore = {
  text: {
    normal: {
      itemStyle: {
        background: 'linear-gradient(180deg, #FFFFFF 0%, #EBF0FB 100%)',
        border: '2px solid #C2E8FF',
      },
      numberStyle: { color: '#5E6994', fontSize: '14px' },
      oddsStyle: { color: '#817E87', fontSize: '11px' },
    },
    active: {
      itemStyle: {
        background: 'linear-gradient(180deg, #77D7FF 0%, #4D7AFC 50%,#4385F8 100%)',
        border: '2px solid #FFFFFF',
      },
      numberStyle: { color: '#FFFFFF', fontSize: '14px' },
      oddsStyle: { color: '#FFFFFF', fontSize: '11px' },
    },
  },
  red: {
    normal: {
      itemStyle: {
        border: '1px solid #E07175',
      },
      numberStyle: { color: '#E07175', fontSize: '14px' },
      oddsStyle: { color: '#817E87', fontSize: '11px' },
    },
    active: {
      itemStyle: {
        backgroundImage: `url(${roune_red})`,
        backgroundSize: 'cover',
      },
      numberStyle: { color: '#FFFFFF', fontSize: '14px' },
      oddsStyle: { color: '#FFFFFF', fontSize: '11px' },
    },
  },
  blue: {
    normal: {
      itemStyle: {
        border: '1px solid #7BA3F1',
      },
      numberStyle: { color: '#7BA3F1', fontSize: '14px' },
      oddsStyle: { color: '#817E87', fontSize: '11px' },
    },
    active: {
      itemStyle: {
        backgroundImage: `url(${roune_blue})`,
        backgroundSize: 'cover',
      },
      numberStyle: { color: '#FFFFFF', fontSize: '14px' },
      oddsStyle: { color: '#FFFFFF', fontSize: '11px' },
    },
  },
  green: {
    normal: {
      itemStyle: {
        border: '1px solid #53C9A5',
      },
      numberStyle: { color: '#53C9A5', fontSize: '14px' },
      oddsStyle: { color: '#817E87', fontSize: '11px' },
    },
    active: {
      itemStyle: {
        backgroundImage: `url(${roune_green})`,
        backgroundSize: 'cover',
      },
      numberStyle: { color: '#FFFFFF', fontSize: '14px' },
      oddsStyle: { color: '#FFFFFF', fontSize: '11px' },
    },
  },
}

const roundStyleStore = {
  red: {
    normal: {
      itemStyle: {
        background: 'linear-gradient(180deg, #FFFFFF 0%, #FBEBEB 100%)',
        border: '1px solid ##FACACA',
      },
      numberStyle: { color: '##5E6994', fontSize: '16px' },
      oddsStyle: { color: '#817E87', fontSize: '16px' },
    },
    active: {
      itemStyle: {
        background: '#F64436',
        border: '1px solid #F64436',
      },
      numberStyle: { color: '#FFFFFF', fontSize: '14px' },
      oddsStyle: { color: '#FFFFFF', fontSize: '11px' },
    },
  },
  blue: {
    normal: {
      itemStyle: {
        background: 'linear-gradient(180deg, #FFFFFF 0%, #DCE7FF 100%)',
        border: '1px solid #AFBDEF',
      },
      numberStyle: { color: '#5E6994', fontSize: '14px' },
      oddsStyle: { color: '#817E87', fontSize: '11px' },
    },
    active: {
      itemStyle: {
        background: '#007BFF',
        border: '1px solid #007BFF',
      },
      numberStyle: { color: '#FFFFFF', fontSize: '14px' },
      oddsStyle: { color: '#FFFFFF', fontSize: '11px' },
    },
  },
  green: {
    normal: {
      itemStyle: {
        background: 'linear-gradient(180deg, #FFFFFF 0%, #DCFFEA 100%)',
        border: '1px solid #A5E5E7',
      },
      numberStyle: { color: '#5E6994', fontSize: '14px' },
      oddsStyle: { color: '#817E87', fontSize: '11px' },
    },
    active: {
      itemStyle: {
        background: '#36D191',
        border: '1px solid #36D191',
      },
      numberStyle: { color: '#FFFFFF', fontSize: '14px' },
      oddsStyle: { color: '#FFFFFF', fontSize: '11px' },
    },
  },
}

export let numberMap = {}
;(function () {
  numberList.forEach((number) => {
    let color = ''
    let animal = animalMap[number]
    if (redNumList.includes(number)) color = 'red'
    if (blueNumList.includes(number)) color = 'blue'
    if (greenNumList.includes(number)) color = 'green'
    numberMap[number] = { number, color, animal }
  })
})()

// 根据不同号码处理圆形样式。
export const handleRoundStyle = (colorNum) => {
  if (isNaN(Number(colorNum))) return roundStyleStore.red
  return roundStyleStore[numberMap[colorNum].color]
}

// 根据号码不同的色波返回不同的样式。
export const handleStyleFromDifferentColorNum = (colorNum, type) => {
  if (type === 'text' || !colorNum) return styleStore.text
  return styleStore[numberMap[colorNum].color]
}
